<template>
  <!-- 方案规划导航栏 -->
   <div style="width: 100%;height: 240vh;text-align: center;">

    <div class="box"> 

      <div style="    width: 100%;height: 100%;position: absolute;overflow-x: scroll;overflow: hidden; overflow-y: auto;">

        <div class="titleDiv">
          <div class="barColorBox"></div> 
          <div class="titlefont">数据看板</div>
        </div> 

        
        <div class="inputBox">
          <div style="padding-top: 5px;">销售收入总额</div>
          <div>{{priceFor(form.totalSalesRevenue)}}万元</div> 
        </div>
                
        <div class="inputBox">
          <div style="padding-top: 5px;">利润总额</div>
          <div>{{priceFor(form.totalProfit)}}万元</div> 
        </div>
        
        <div class="inputBox">
          <div style="padding-top: 5px;">项目投资回收期(所得税前)</div>
          <div>{{form.projectInvestPaybackPeriod}}年</div> 
        </div>
                
        <div class="inputBox">
          <div style="padding-top: 5px;">项目投资回收期(所得税后)</div>
          <div>{{form.projectInvestPaybackPeriod2}}年</div> 
        </div>
                
        <div class="inputBox">
          <div style="padding-top: 5px;">项目投资财务内部收益率(所得税前)</div>
          <div>{{form.beforeFirr}}%</div> 
        </div>
               
        <div class="inputBox">
          <div style="padding-top: 5px;">项目投资财务内部收益率(所得税后)</div>
          <div>{{form.afterFirr}}%</div> 
        </div>
             
        <div class="inputBox">
          <div style="padding-top: 5px;">项目投资财务净现值(所得税前)</div>
          <div>{{priceFor(form.beforeFnpv)}}万元</div> 
        </div>
                    
        <div class="inputBox">
          <div style="padding-top: 5px;">项目投资财务净现值(所得税后)</div>
          <div>{{form.afterFnpv}}万元</div> 
        </div>

                    
        <div class="inputBox">
          <div style="padding-top: 5px;">资本金财务内部收益率</div>
          <div>{{form.internalRateReturn}}%</div> 
        </div>

                    
        <div class="inputBox">
          <div style="padding-top: 5px;">资本金财务净现值</div>
          <div>{{form.financialNetPresent}}万元</div> 
        </div>

                            
        <div class="inputBox">
          <div style="padding-top: 5px;">总投资收益率(ROI)</div>
          <div>{{form.roi}}%</div> 
        </div>

                            
        <div class="inputBox">
          <div style="padding-top: 5px;">项目资本金净利润率(ROE)</div>
          <div>{{form.roe}}%</div> 
        </div>


      </div>

    </div>
  
    <div style="" class="box1">
      <div id="barCharts1" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>

    <div class="box2">
      <div id="barCharts2" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>
  
    <div class="box3">
      <div id="barCharts3" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>

    <div class="box4">
      <div id="barCharts4" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>
  
    <div class="box7">
      <div id="barCharts5" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>

    <div class="box8">
      <div id="barCharts6" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>



    <div class="box5">
      <div class="titleDiv">
        <div class="barColorBox"></div> 
        <div class="titlefont">项目投资现金流量表</div>
      </div> 

      <div style="width: 98%;height: 116vh;margin: 0 auto;margin-top: 1vh;;">
          
        <el-table :data="tableData1" height="84%">
          <el-table-column
            prop="indexNo"
            label="序号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="projectName"
            label="项目"
            width="150">
          </el-table-column>
          <el-table-column
            prop="total"
            label="合计"
            width="150">
          </el-table-column>
          <el-table-column label="建设期">

            <el-table-column
                v-for="item in constructColumnData1"
                :key="item"
                :label="item.label" 
                :prop="item.prop" 
                align="center"
                 width="150"
            >
            </el-table-column>

          </el-table-column>
          <el-table-column label="运行期">
            <el-table-column
                  v-for="item in runColumnData1"
                  :key="item"
                  :label="item.label" 
                  :prop="item.prop" 
                  align="center"
                   width="150"
              >
              </el-table-column>
          </el-table-column>
        </el-table>

      </div>
    </div>
 
    <div class="box6">
      <div class="titleDiv">
        <div class="barColorBox"></div> 
        <div class="titlefont">项目资本金现金流量表</div>
      </div> 

      
      <div style="width: 98%;height: 111vh;margin: 0 auto;margin-top: 1vh;;">
          
          <el-table :data="tableData2" height="76%">
            <el-table-column
              prop="indexNo"
              label="序号"
              width="150">
            </el-table-column>
            <el-table-column
              prop="projectName"
              label="项目"
              width="150">
            </el-table-column>
            <el-table-column
              prop="total"
              label="合计"
              width="150">
            </el-table-column>
            <el-table-column label="建设期">
              
              <el-table-column
                  v-for="item in constructColumnData2"
                  :key="item"
                  :label="item.label" 
                  :prop="item.prop" 
                  align="center"
                  width="150"
              >
              </el-table-column>


            </el-table-column>
            <el-table-column label="运行期">
                            
              <el-table-column
                  v-for="item in runColumnData2"
                  :key="item"
                  :label="item.label" 
                  :prop="item.prop" 
                  align="center"
                  width="150"
              >
              </el-table-column>

            </el-table-column>
          </el-table>
  
        </div>

    </div>

  </div>
  
</template>

<script>
  
  import priceUtil from '../../assets/js/priceUtil.js'

  export default {
    name: 'economicAnalysisHT',
    data() {
      return {
        form:{
          projectId : "",
          totalSalesRevenue:"-",
          totalProfit:"-",
          projectInvestPaybackPeriod:"-",
          projectInvestPaybackPeriod2:"-",
          beforeFirr:"-",
          afterFirr:"-",
          beforeFnpv:"-",
          afterFnpv:"-",
          internalRateReturn : "-",
          financialNetPresent:"-",
          roi:"-",
          roe:"-", 
        },
        projectId : "",
        constructColumnData1:[
          {
            prop:"data1",
            label:"第一年"
          },
          {
            prop:"data2",
            label:"第二年"
          },
        ],

        runColumnData1:[
          {
            prop:"data3",
            label:"第三年"
          },
          {
            prop:"data4",
            label:"第四年"
          },
        ],

        constructColumnData2:[
          {
            prop:"data1",
            label:"第一年"
          },
          {
            prop:"data2",
            label:"第二年"
          },
        ],

        runColumnData2:[
          {
            prop:"data3",
            label:"第三年"
          },
          {
            prop:"data4",
            label:"第四年"
          },
        ],


        tableData1:[
          {
            indexNo:"1",
            projectName:"项目1",
            total:"444444",
            data1:"123",
            data2:"333",
            data3:"2333",
            data4:"5555"

          },
          {
            indexNo:"2",
            projectName:"项目2",
            total:"3333333",
            data1:"566",
            data2:"33773",
            data3:"7777",
            data4:"8899"

          },
        ]
        

      }
    },
    mounted: function() {
      //获取项目id
      this.projectId = this.$route.query.projectId;
      this.queryPageData();
    },
    methods: {
      priceFor : function(price){
        var value = window.priceFor(price);
        return value;
      },
      queryPageData : function(){

        var vm = this;

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryHtEconomicAnalysis?projectId='+this.projectId+"&type=trailerHydrogenTransport"+"&tableName=ht_economic_analysis").then((res) => {
          var result = res.data;
           
          if(result){

            vm.form = result.formData;
 
            var chartData1 = result.chartData1;
            var chartData2 = result.chartData2;
            var chartData3 = result.chartData3;
            var chartData4 = result.chartData4;
            var chartData5 = result.chartData5;
            var chartData6 = result.chartData6;

            vm.constructColumnData1 = result.constructColumnData1;
            vm.runColumnData1 = result.runColumnData1;
            vm.tableData1 = result.tableData1;

            vm.constructColumnData2 = result.constructColumnData2;
            vm.runColumnData2 = result.runColumnData2;
            vm.tableData2 = result.tableData2;


            let barCharts1 = this.$echarts.init(document.getElementById('barCharts1'))
            let barCharts2 = this.$echarts.init(document.getElementById('barCharts2'))
            let barCharts3 = this.$echarts.init(document.getElementById('barCharts3'))
            let barCharts4 = this.$echarts.init(document.getElementById('barCharts4'))
            let barCharts5 = this.$echarts.init(document.getElementById('barCharts5'))
            let barCharts6 = this.$echarts.init(document.getElementById('barCharts6'))


            var barOption1 = this.getBarOption();
            var barOption2 = this.getBarOption();
            var barOption3 = this.getBarOption();
            var barOption4 = this.getBarOption();
            var barOption5 = this.getBarOption();
            var barOption6 = this.getBarOption();

            barOption1.title.text = "投资净现金流（所得税前）";
            barOption2.title.text = "累计投资净现金流（所得税前）";
            barOption3.title.text = "投资净现金流（所得税后）";
            barOption4.title.text = "累计投资净现金流（所得税后）";
            barOption5.title.text = "资本金净现金流";
            barOption6.title.text = "累计资本金净现金流";

            barCharts1.clear(); 
            barCharts2.clear(); 
            barCharts3.clear(); 
            barCharts4.clear(); 
            barCharts5.clear(); 
            barCharts6.clear(); 


            if(chartData1){
              barOption1.xAxis.data = chartData1.xAxisData;
              barOption1.series[0].data = chartData1.seriesData;
            }

            if(chartData2){
              barOption2.xAxis.data = chartData2.xAxisData;
              barOption2.series[0].data = chartData2.seriesData;
            }


            if(chartData3){
              barOption3.xAxis.data = chartData3.xAxisData;
              barOption3.series[0].data = chartData3.seriesData;
            }

            if(chartData4){
              barOption4.xAxis.data = chartData4.xAxisData;
              barOption4.series[0].data = chartData4.seriesData;
            }

            if(chartData5){
              barOption5.xAxis.data = chartData5.xAxisData;
              barOption5.series[0].data = chartData5.seriesData;
            }

            if(chartData6){
              barOption6.xAxis.data = chartData6.xAxisData;
              barOption6.series[0].data = chartData6.seriesData;
            }
        
            barCharts1.setOption(barOption1); 
            barCharts2.setOption(barOption2); 
            barCharts3.setOption(barOption3); 
            barCharts4.setOption(barOption4); 
            barCharts5.setOption(barOption5); 
            barCharts6.setOption(barOption6); 

            window.onresize = function(){
              barCharts1.resize(); 
              barCharts2.resize(); 
              barCharts3.resize(); 
              barCharts4.resize(); 
              barCharts5.resize(); 
              barCharts6.resize(); 

            }

          }
        }).catch((error) => {
          console.log(error);
        });


      },


      getBarOption:function(){

        var barOption = { 
          //浮动框
          tooltip: {
            trigger: "axis",
            show: true
          },
          title: {
            text: '',
            left: 'center', // 标题居中显示
            top:'2%',
            textStyle: {
              color: '#f2f2f2', // 标题字体颜色为黑色
              fontSize: 16, // 标题字体大小为24px
              fontWeight: 'bold', // 标题字体加粗
            },
          },
          //图例
          legend: {
            right: '12%',
            bottom: '4%',
            textStyle: {
              color: '#fff',
              fontSize: '13',
            },
            itemGap: 20,
            itemWidth: 10,
            itemHeight: 10,
            icon: 'circle',
            data: ['PM2.5', 'CO2', 'SO'],
          },
          grid: {
            right: '15%',
            left: '12%',
            top: '15%',
            bottom: '14%',
            width: '86%',
          },

          //x轴
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#445fe7c7',
              },
            },
            axisLabel: {
              textStyle: {
                color: '#FFF',
                fontSize: 12,
              },
            },
            //刻度线
            axisTick: {
              show: false,
            },
            //坐标轴显示值
            data: ['2025', '2030', '2035', '2040', '2045', '2055', '2060', '2065'],
          },
          //y轴
          yAxis: {
            name:"万元",
            nameTextStyle: {
              color: '#f2f2f2',
            },
            // min: 0,
            // max: 100,
            axisLabel: {
              //  改变y轴字体颜色和大小
              //formatter: '{value} m³ ', //  给y轴添加单位
              textStyle: {
                color: '#fff',
                fontSize: 12,
              },
            },
            //坐标轴线
            axisLine: {
              show: false,
            },
            //刻度线
            axisTick: {
              show: false,
            },
            //在grid区域中的分隔线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#707fc93b',
              },
            },
          },
          series: [
            {
              type: "bar",
              barMaxWidth: 25,
              data:  [76, 58, -50, 18, 39, -59, 78, -80].map((item) => {
                // 循环 
                return {
                  value: item,
                  label: {
                    show: true, //开启显示
                    position: item > 0 ? "top" : "bottom", //判断正负值上方显示还是下方
                    formatter: "{c}",//单位
                    textStyle: {
                      //数值样式
                      color: item < 0 ? "#F2F2F2" : "#F2F2F2",   //数值颜色
                      fontSize: "18px",
                    },
                  },
                };
              }),
              itemStyle: {//柱体背景色
                normal: {
                  color: (val) => {
                    var index_color = val.value;
                    return index_color > 0 ? "#409EFF" : "#229D45";
                  },
                },
              },
            },
          ],
        };

        return barOption;

      }

    }
  }
</script>



<style>

/* 覆盖默认滚动条样式 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 设置滚动条轨道的颜色 */
::-webkit-scrollbar-track {
  background-color: #17057e;
}

/* 设置滚动条滑块的颜色 */
::-webkit-scrollbar-thumb {
  background-color: #47b8ec;
}

/* 设置滚动条滑块悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #47b8ec;
}

.titleDiv {
    width: 100%;
    margin: 0.5vh;
    height: 2.5vh; 
    font-weight: bold; 
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 700;
    font-style: normal;
    font-size: 2vh;
    color: #f2f2f2;
    text-align: left;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
  }
  .barColorBox {
    height: 2.5vh;
    width: 0.7vh;
    border-radius: 1px;
    display: inline-block;
    vertical-align: text-bottom;
    border: none;
    box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
    background-color: #FAFAFA;
    background-image: -webkit-linear-gradient(top,#17b4db,#07c968);
    background-image: -o-linear-gradient(top,#17b4db,#07c968);
    background-image: -ms-linear-gradient(top,#17b4db,#07c968);
    background-image: linear-gradient(top,#17b4db,#07c968);
    background-repeat: repeat-x;
  }

  .titlefont {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 1.8vh;
    padding-left: 5px;
    margin-top: 0vh;
  }



.el-table{
  background-color: rgb(20 34 78);
  color: #FFFFFF;
  border-color: rgb(24 63 124 / 51%);
  *{
    border-color: rgb(24 63 124 / 51%) !important;
  }
  .el-table__header-wrapper{
    tr{
      background-color: rgb(10 24 90 / 81%);
      th{
        color: #ffffff;
        background-color: rgba(0,0,0,0.4);
      }
    }
  }
  .el-table__body-wrapper{
    tr{
      background-color: rgb(8 26 80 / 88%);
      &:hover>td{      
        background-color: rgb(13 30 80);
      }
    }
  }
}
  .el-form--inline .el-form-item__content {
      display: inline-block;
      vertical-align: middle;
      margin-left: 1vh;
  }

  .el-radio {
      color: #eff4ff;
      cursor: pointer;
      margin-right: 30px;
  }

  .el-form-item {
      margin-bottom: 5px;
  }
  .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 

  .inputBox{
    background-image: url(../../assets/images/infoBackground3.png);
    margin: 2vh auto;
    margin-left: 1vh;
    width: 98%;
    height: 7vh;
    background-repeat: round;
    opacity: 1;
    border-radius: 6px;
    font-size: 1vw;
    color: #ffffff;
  }
  .buttonStyle {
    height: 4vh;
    width: 24vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #161E43;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }

  
  .box{      
    width: 22.5%;
    height: 90vh;
    position: absolute;
    left: 1vh;
    top: 1vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .box1{  
    width: 38.5%;
    height: 41%;
    position: absolute;
    left: 39vh;
    top: 1vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

 

  .box2{ 
    width: 37%;
    height: 41%;
    position: absolute;
    left: 105vh;
    top: 1vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }
  
  .box3{ 
    width: 38.5%;
    height: 41%;
    position: absolute;
    left: 39vh;
    top: 31.4vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .box4{ 
    width: 37%;
    height: 41%;
    position: absolute;
    left: 105vh;
    top: 31.4vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

    
  .box7{ 
    width: 38.5%;
    height: 41%;
    position: absolute;
    left: 39vh;
    top: 61.8vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .box8{ 
    width: 37%;
    height: 41%;
    position: absolute;
    left: 105vh;
    top: 61.8vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }


  .box5{ 
    width: 98.6%;
    height: 104vh;
    position: absolute;
    left: 1vh;
    top: 92.5vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .box6{ 
    width: 98.6%;
    height: 91vh;
    position: absolute;
    left: 1vh;
    top: 198.4vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  

  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }
</style>
